<!--  -->
<template>
    <div class='realnameAuthentication'>
        <!--        头部-->
        <head-top></head-top>
        <div style="width: 100%;height: 50px;"></div>
        <div class="textCon">
            <div>

                为保障商家和会员的资金安全和合法权益，请先实名认证，实名上传之后，后台会审核，信息仅供平台核验不会用作其他途径。
            </div>
            <p style="color:red;font-size: 16px;font-weight: bold">注意事项</p>
            <div>
                <span class="cricular">1</span>身份证信息自行打水印，水印名称【仅用于副业兼职使用】，微商水印打水印，其他信息不可以涂改。
            </div>
            <p style="color:#0d09fd;" @click="clickCheck">查看图例</p>
            <div>
                <p><span class="cricular">2</span>不可以用电子版，扫描版，PDF版，需要实拍身份证</p>
                <p><span class="cricular">3</span>身份证必须漏出4个角，不可以有遮挡物和马赛克</p>
                <p><span class="cricular">4</span>所有信息仅供平台身份核验，不会用于其他任何途径</p>
            </div>
            <div class="status">
                <div>当前状态</div>
                <div>{{realnameStatusString}}</div>
            </div>
        </div>
        <div>
            <div class="form">
                <van-form @submit="onSubmit">
                    <div class="formItem">
                        <div class="formitemPd">
                            <van-field
                                    v-model="form.identityName"
                                    name="身份证名字"
                                    label="身份证名字"
                                    placeholder="请输入"
                                    :rules="[{ required: true}]"
                            />
                        </div>
                    </div>
                    <div class="formItem">
                        <div class="formitemPd">
                            <van-field
                                    v-model="form.identityNumber"
                                    name="身份证号"
                                    label="身份证号"
                                    placeholder="请输入"
                                    :rules="[{ required: true}]"
                            />
                        </div>
                    </div>
                    <div class="formItem" >
                        <div class="formitemPd uploaderCon">
                            <div class="leftText">
                                身份证人面
                            </div>
                            <div class="uploaderField">
                                <van-field name="uploader"
                                           v-model="form.identityBack"
                                           :rules="[{ required: true,message:'请上传身份证正面'}]"
                                >
                                    <template #input>
                                        <div class="imgs">
                                            <div class="uploadBut">
                                                上传
                                                <input type="file" ref="upFile"  placeholder="的"
                                                       @change="File()"></input>
                                            </div>
                                        </div>
                                    </template>
                                </van-field>
                            </div>
                        </div>
                        <div class="preview" ref="preview">
                            <div class="imgItem" >
                                <img :src="form.identityBack"/>
                                <div v-if="previewFlag" class="bg"></div>
                            </div>

                        </div>

                    </div>
                    <div class="formItem">
                        <div class="formitemPd uploaderCon">
                            <div class="leftText">
                                身份证反面
                            </div>
                            <div class="uploaderField" >
                                <van-field name="uploader"
                                           v-model="form.identityFront"
                                           :rules="[{ required: true,message:'请上传身反面份证'}]"
                                >
                                    <template #input>
                                        <div class="imgs">
                                            <div class="uploadBut">
                                                上传
                                                <input type="file" ref="upFile2" placeholder="的"
                                                       @change="File2()"></input>
                                            </div>
                                        </div>
                                    </template>
                                </van-field>
                            </div>
                        </div>

                        <div class="preview" ref="preview">
                            <div class="imgItem">
                                <img :src="form.identityFront"/>
<!--                                <div v-if="previewFlag2" class="bg"></div>-->
                            </div>

                        </div>
                    </div>
                    <div class="sub" >
                        <van-button round block type="info" native-type="submit">提交</van-button>
                    </div>
                </van-form>
            </div>
        </div>
        <div style="height: 80px;width: 100%;"></div>
        <div class="heckBg" v-show="heckFlag" @click="heckBg"></div>
    </div>
</template>

<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from ‘《组件路径》‘;
    import headTop from "../../components/base/headTop.vue"
    import user from '@/api/user'
    import comApi from '@/api/comapi'
    export default {
//import引入的组件需要注入到对象中才能使用
        components: {
            headTop
        },
        data() {
            return {
                realnameStatusString:'',
                heckFlag: false,
                username: '',
                password: '',
                previewFlag: true,
                previewFlag2: true,
                fileType: ['image/png', 'image/jpeg'],
            form:{
                identityBack:'',
                identityFront: '',
                identityName: "",
                identityNumber: ""
            }
            };
        },
//监听属性 类似于data概念
        computed: {},
//监控data中的数据变化
        watch: {},

        methods: {
            clickCheck() {
                this.heckFlag = true
            },
            heckBg() {
                this.heckFlag = false
            },
            File() {
                let file = this.$refs.upFile.files[0];
                if (this.fileType.indexOf(file.type) < 0) {
                    Toast('请上传 jpg或png 格式图片');
                    return false;
                }
                let formData = new FormData();
                formData.append("file", file)
                comApi.fileUpload(formData).then(res => {
                    console.log(res)
                    this.previewFlag = false
                        this.form.identityBack=res.data

                })


                return true;
            },
            File2() {
                let file = this.$refs.upFile2.files[0];
                if (this.fileType.indexOf(file.type) < 0) {
                    Toast('请上传 jpg或png 格式图片');
                    return false;
                }
                let formData = new FormData();
                formData.append("file", file)
                comApi.fileUpload(formData).then(res => {
                    console.log(res)
                    // this.previewFlag2 = false
                        this.form.identityFront=res.data
                })

                return true;
            },


            onSubmit(values) {
                console.log('submit', values);
                user.realNameAuthentication(this.form).then(res=>{
                    console.log(res)
                    this.$toast('上传成功')
                  this.getRealResult()
                })
            },
          getRealResult(){
            user.getRealNameAuthenticationResult().then(res=>{
              console.log(res)
              console.log(res.data.record)
              this.form.identityBack=res.data.record.identityBack
              this.form.identityFront=res.data.record.identityFront
              this.form.identityName=res.data.record.identityName
              this.form.identityNumber= res.data.record.identityNumber
              this.realnameStatusString = res.data.record.realnameStatusString
              if(res.data.record.realnameStatusString != ''){
                this.previewFlag= false
                this.previewFlag2= false
              }
            })
          }
        },

        created() {
           this.getRealResult()
        },

        mounted() {

        },
        beforeCreate() {
        },
        beforeMount() {
        },
        beforeUpdate() {
        },
        updated() {
        },
        beforeDestroy() {
        },
        destroyed() {
        },
        activated() {
        }, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style lang="less" scoped>
    .realnameAuthentication {
        width: 100%;
        min-height: 100%;
        background: #f8f8f8;
    }

    .textCon {
        font-size: 14px;
        border-bottom: 5px solid #f0eff4;

        .cricular {
            display: inline-block;
            font-size: 12px;
            text-align: center;
            width: 12px;
            height: 12px;
            line-height: 12px;
            color: white;
            border-radius: 50%;
            background: black;

        }

        .status {
            display: flex;
            justify-content: space-between;
            align-items: center;

            div {
                padding: 10px;
            }

            :nth-child(1) {
                font-weight: bold;
            }

            :nth-child(2) {
                color: red;
            }
        }
    }

    .form {
        .formItem {
            width: 100%;
          border-bottom: 1px solid #e5e5e5;
          /deep/.van-cell {
            background: #f8f8f8;
          }
            .uploaderCon {
                border-bottom: 1px solid #e5e5e6;
                font-size: 14px;
                display: flex;
                align-items: center;
                padding: 10px;
              /deep/.van-cell {
                padding: 0px;
              }
                /deep/ .van-field__label {
                    color: #9e989f !important;
                }

                .leftText {
                    color: #131413;
                }

                .uploaderField {
                    flex: 1;
                    position: relative;

                    /deep/.van-cell::after {
                        border: none;
                    }

                    /deep/.van-field__control--custom {
                        justify-content: flex-end;
                      background: #f8f8f8;
                    }

                    .imgs {
                        .uploadBut {
                            width: 50px;
                            height: 30px;
                            line-height: 30px;
                            text-align: center;
                            padding: 0 20px;
                            margin: 0 0 15px 30px;
                            background: #f8f5be;
                            border-radius: 20px;
                            position: relative;

                            input {
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                top: 2px;
                                left: -10px;
                                opacity: 0;
                            }

                        }

                    }

                }
            }

            .preview {
                padding: 10px;
                display: flex;
                justify-content: center;
                border-bottom: 1px solid #e5e5e6;
              .imgItem{
                  width: 100%;
                  height: 180px;
                  position: relative;
                  img {
                      width: 100%;
                      height: 180px;
                      border: none;
                      outline: none;
                  }
                  .cancel{
                      font-size: 24px;
                      position: absolute;
                      top: 5px;
                      right: 5px;
                  }
                  .bg {
                      position: absolute;
                      left: 0;
                      top: 0;
                      width: 100%;
                      height: 100%;
                      background: #f8f8f8;
                  }
              }

            }
        }
        :nth-child(3){
            border-bottom: none;
        }
        .sub {
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #ffffff;
            padding-bottom: 10px;

            .van-button {
                width: 95%;
                margin: 0 auto;
                background: #f8f5be;
                border: none;
                color: black;
            }
        }
    }

    .heckBg {
        width: 100%;
        min-height: 100%;
        background: rgba(0, 0, 0, .5);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
    }
</style>
